<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="format-detection" content="telephone=no">
    <title>我的收银台</title>
    <script src="static/js/cssrem.js"></script>
    <link href="static/css/style.css" rel="stylesheet">
    <style>
.layer-loading-ui .layui-m-layershade {background-color: rgba(0, 0, 0, .6) !important;}
.layer-loading-ui .layui-m-layercont i {background-color: rgba(196, 159, 86, 0.86) !important;}
.layer-loading-ui .layui-m-layerchild {color: #c49f56 !important;}
    </style>
</head>
<body>
<script>
var channelType;
if (
  typeof test !== 'undefined' ||
  (typeof window.webkit !== 'undefined' && typeof window.webkit.messageHandlers.canJsGoBack !==
      'undefined')
) {
  channelType = "APP";
  document.write(
    '<header class="header"><div class="header-bg"></div><div class="titlet-bar white"><a class="btn-goback active dib"></a><div class="title ell g3">收银台</div></div></header>'
  )
}else{
	if(navigator.userAgent.toLowerCase().match(/MicroMessenger/i) ==
	'micromessenger'){
		channelType = "WAP";
	}else{
		channelType = "H5";
	}
	
  document.write(
    '<header class="header dn"><div class="header-bg"></div><div class="titlet-bar white"><a class="btn-goback active dib"></a><div class="title ell g3">收银台</div></div></header>'
  )
}
</script>
<!-- <header class="header">
    <div class="header-bg"></div>
    <div class="titlet-bar white">
        <a href="javascript:;" class="btn-goback active dib"></a>
        <div class="title ell g3">收银台</div>
    </div>
</header> -->
<div class="content">
    <div class="wrapper">
        <div class="pay-amount tc">
            <div class="dt tc f0">
                <span class="icon-money dib vm"></span>
                <input type="hidden" value="${resMap.transactionCode }" id="transactionCode" name="transactionCode">
                <input type="hidden" value="${resMap.price }" id="price" name="price">
                <span class="money dib vm"><em class="f38 g3">支付金额：</em>￥${resMap.price}</span>
            </div>
        </div>
        <ul class="pay-method">
            <li class="pay-method-item bgwh active" payMode="wechat">
                <div class="cell">
                    <div class="cell-hd"><i class="icon-pay-wx dib vm"></i></div>
                    <dl class="cell-bd">
                        <dt class="f28">微信支付</dt>
                        <dd class="f24 g9">推荐安装微信5.0以上版本的用户使用</dd>
                    </dl>
                    <div class="cell-fd"><i class="btn-radio ion-ios-checkmark dib vm"></i></div>
                </div>
            </li>
            
            <li class="pay-method-item bgwh dn alipay" payMode="alipay">
                <div class="cell">
                    <div class="cell-hd"><i class="icon-pay-zfb dib vm"></i></div>
                    <dl class="cell-bd">
                        <dt class="f28">支付宝支付</dt>
                        <dd class="f24 g9">推荐有支付宝账号的用户使用</dd>
                    </dl>
                    <!-- ion-ios-circle-outline -->
                    <div class="cell-fd"><i class="btn-radio ion-ios-checkmark ion-ios-circle-outline dib vm"></i></div>
                </div>
            </li>
            <script>
            	if(channelType != 'WAP'){
            		document.querySelector('.alipay').classList.remove('dn')
            	}
            </script>
        </ul>

        <div class="tc tc">
            <a class="btn-submit dib" href="javascript:;" price="确认支付￥${resMap.price}">确认支付￥${resMap.price}</a>
        </div>
        <div id="alipay_box"></div>
    </div>
</div>
<script src="//cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"></script>
<link href="//cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
<script src="static/js/layer_mobile/layer.js"></script>
<script>

    document.addEventListener('DOMContentLoaded', function () {
        radio()
        submit()
    })
    var load;
    var btnSubmit = document.querySelector('.btn-submit');

    function submit() {
        btnSubmit.addEventListener('click', function () {
            this.innerHTML = '正在支付';
            var payMode = document.querySelector('.pay-method-item.active').getAttribute('payMode');
            var params = new Object();
            params.transactionCode = document.querySelector('#transactionCode').value;
            params.price = document.querySelector('#price').value;
            params.channelType = channelType;
            // Loading
            load = layer.open({
                type: 2,
                className:'layer-loading-ui',
                shadeClose: false,
                content: '支付中'
            });
            if (payMode === 'alipay') {
                goAliPayWap(params);

            } else if (payMode === 'wechat') {
                goWechatWap(params);
            }

        })
    }

    function goAliPayWap(params) {
        axios({
            method: 'post',
            url: 'wap/lightpay/confirm_alipay_pay',
            data: params
        }).then(function (res) {
            var data = res.data;
            var state = data.result.state;
            if (state == 1) {
                document.querySelector('#alipay_box').innerHTML = data.url;
                document.forms[0].submit();
                layer.close(load);
            } else {
                layer.close(load);
                layer.open({
                    content: data.result.message,
                    time: 2
                });
            }
            btnSubmit.innerHTML = btnSubmit.getAttribute('price');
        }).catch(function (err) {

        });


    }

    function goWechatWap(params) {
        axios({
            method: 'post',
            url: 'wap/lightpay/weChatPay',
            data: params
        }).then(function (res) {
            var data = res.data;
            var state = data.result.state;
            if (state == 1) {
                layer.close(load);
                
                if(channelType == 'H5'){
                	var mweb_url = data.prePayInfo.mweb_url;
                	var redirect_url = data.prePayInfo.returnUrl;
                	window.location.href = mweb_url + "&redirect_url="+redirect_url;
                	
                }else if(channelType == 'APP'){
                	var params = JSON.stringify(data.prePayInfo);
                    window.location.href = "weChatPay://" + params;
                }else if(channelType == 'WAP'){
                	doWxJsPay(data.prePayInfo);
                }
            } else {
            	var code = data.result.code;
            	layer.close(load);
            	if(code == 'loginOut'){
            		goLoginView();
            	}else if(code == 'openId_error'){
            		window.location.href = data.redirectUrl;
            	}else{
            		layer.open({
                        content: data.result.message,
                        time: 2
                    });
            	}
                
            }
            btnSubmit.innerHTML = btnSubmit.getAttribute('price');
        }).catch(function (err) {

        });
    }

    function doWxJsPay(prePayInfo){
    	if (typeof WeixinJSBridge == "undefined"){
    		   if( document.addEventListener ){
    		       document.addEventListener('WeixinJSBridgeReady', function(){
    		    	   onBridgeReady(prePayInfo);
    		       }, false);
    		   }else if (document.attachEvent){
    		       document.attachEvent('WeixinJSBridgeReady', function(){
    		    	   onBridgeReady(prePayInfo);
    		       }); 
    		       document.attachEvent('onWeixinJSBridgeReady', function(){
    		    	   onBridgeReady(prePayInfo);
    		       });
    		   }
    		}else{
    		   onBridgeReady(prePayInfo);
    		}
    }
    function onBridgeReady(prePayInfo){
    	WeixinJSBridge.invoke('getBrandWCPayRequest',prePayInfo,
    		    function(res){
    		       //支付成功或失败前台判断
        	       if(res.err_msg=='get_brand_wcpay_request:ok'){
        	    	   layer.open({
    					    title: '提示',
    					    content: '恭喜你，支付成功！',
    					    btn: ['我知道了'],
    					    yes: function(index){
    					        layer.close(index);
    					        window.location.href=prePayInfo.returnUrl;
    					    }
    					});	
        	       }else if(res.err_msg=='get_brand_wcpay_request:cancel'){	   
        	    	   layer.open({
    					    title: '提示',
    					    content: '支付已取消！',
    					    btn: ['我知道了']
    					});	
        	       }else{
        	    	   layer.open({
    					    title: '提示',
    					    content: '支付失败，请重试！',
    					    btn: ['我知道了']
    					});	
        	       }
    		     });
    	
    }    
    
    function radio() {
        var items = document.querySelectorAll('.pay-method-item')
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            item.addEventListener('click', function () {
                for (var i = 0; i < items.length; i++) {
                    items[i].classList.remove('active')
                    items[i].querySelector('.btn-radio').classList.add('ion-ios-circle-outline')
                }
                this.classList.add('active')
                this.querySelector('.btn-radio').classList.remove('ion-ios-circle-outline')
            })
        }

    }

	function goLoginView(){
		if (typeof test !== 'undefined') {
	          test.goLoginView()
		} else if (typeof window.webkit !== 'undefined' && typeof window.webkit.messageHandlers.canJsGoBack !==
	        'undefined') {
	      window.webkit.messageHandlers.goLoginView.postMessage('1111')
	    } else {
	    	location.href = '/wap/login/toLogin?forward='+encodeURIComponent('/wap/goods/detail?id=${goodsTimeId}')+'&sourceChannel=0'
	    }
	}
    
</script>
<script type="text/javascript" src="static/js/app.js"></script>
<script type="text/javascript" src="static/js/pay.js"></script>
</body>

</html>

